<template>
  <div class="findpassword_container">
      <myHead></myHead>
        <div class="login_container">
          <div class="nav">
            <span>首页</span>
            >
            <span>我的</span>
            >
            <span>找回密码</span>
          </div>
          <div class="verUserInfo">
            <div class="phone">
              <input type="text" placeholder="请输入手机号码">
              <button>发送验证码</button>
            </div>
            <input type="password" placeholder="请输入短信中的验证码">
            <input type="password" placeholder="请输入新密码">
            <input type="password" placeholder="请输入确认密码">
            <div class="bottom">
              <a href="javascript:;">提交</a>
            </div>
          </div>
        </div>
  </div>
</template>

<script>
import myHead from '@/components/myHead.vue'

export default {
  components: {
    myHead
  }
}
</script>

<style lang="less" scoped>
@color: #ff8a00;
@color1: #2f3130;
@vw: 3.20vw;
html {
      background-color: rgb(245, 245, 245);
    }
.findpassword_container{
    .login_container {
      .nav {
        background-color: #fff;
        height: (37/@vw);
        font-size: (12/@vw);
        padding-left: (16/@vw);
        border-bottom: 1px solid rgb(197, 197, 197);

        span {
          line-height: (37/@vw);

          &:first-child {
            font-weight: 700;
          }
        }
      }

      .verUserInfo {
        .input {
          padding-left: (14/@vw);
          margin-top: 1px;
          width: 100%;
          height: (43/@vw);
          border: none;
          border-bottom: 1px solid rgb(197, 197, 197);
          outline: none;
        }

        .phone {
          position: relative;

          input {
            .input();
          }

          button {
            position: absolute;
            top: (6/@vw);
            right: (16/@vw);
            width: (82/@vw);
            height: (32/@vw);
            border: 1px solid rgb(220, 220, 220);
            background-color: #fff;
            font-size: (12/@vw)
          }
        }

        >input {
          .input();
        }

        .bottom {
          padding: 0px (10/@vw);
          margin-top: (14/@vw);

          >a {
            display: block;
            width: 100%;
            height: (48/@vw);
            background-color: @color;
            text-align: center;
            line-height: (48/@vw);
            color: #fff;
            font-size: (16/@vw);
          }
        }
      }
    }
}
</style>
